<template>
  <div>
    <div class="container-fluid">
      <div class="common_title">
        文章编辑
      </div>
      <div class="container-fluid common_con">
        <form class="form-horizontal article_form" id="form" ref="form">
          <div class="form-group">
            <label for="inputTitle" class="col-sm-2 control-label"
              >文章标题：</label
            >
            <div class="col-sm-10">
              <input
                type="text"
                name="title"
                class="form-control title"
                id="inputTitle"
                v-model="article.title"
              />
            </div>
          </div>
          <div class="form-group">
            <label for="inputCover" class="col-sm-2 control-label"
              >文章封面：</label
            >
            <div class="col-sm-10">
              <img :src="article.cover" class="article_cover" />
              <input
                name="cover"
                type="file"
                id="inputCover"
                ref="file"
                @change="doChange"
              />
            </div>
          </div>
          <div class="form-group">
            <label for="inputCategory" class="col-sm-2 control-label"
              >文章类别：</label
            >
            <div class="col-sm-4">
              <select
                ref="sel"
                class="form-control category"
                v-model="article.category"
                name="categoryId"
              >
                <option
                  v-for="item in categoryList"
                  :key="item.id"
                  :value="item.id"
                  >{{ item.name }}</option
                >
              </select>
            </div>
          </div>
          <div class="form-group">
            <label class="col-sm-2 control-label">发布时间：</label>
            <div class="col-sm-4">
              <el-date-picker
                v-model="article.date"
                type="date"
                placeholder="选择日期"
                format="yyyy 年 MM 月 dd 日"
                value-format="yyyy-MM-dd"
              >
                >
              </el-date-picker>
            </div>
          </div>
          <div class="form-group">
            <label for="inputEmail3" class="col-sm-2 control-label"
              >文章内容：</label
            >
            <div id="content" class="col-sm-10"></div>
          </div>
          <div class="form-group">
            <div class="col-sm-offset-2 col-sm-10">
              <button
                type="submit"
                class="btn btn-success btn-release"
                @click.prevent="doRelease('已发布')"
              >
                发布
              </button>
              <button
                type="submit"
                class="btn btn-default btn-draft"
                @click.prevent="doRelease('草稿')"
              >
                存为草稿
              </button>
            </div>
          </div>
        </form>
      </div>
    </div>
  </div>
</template>

<script>
import E from 'wangeditor'
import { getArticleCategory, addArticle, editArticle } from './article.js'
export default {
  name: 'articleRelease',
  data () {
    return {
      article: {
        title: '请输入文章标题',
        cover: '',
        category: 1,
        date: new Date(),
        content: '请输入文章内容',
        state: ''
      },
      editor: null,
      categoryList: []
    }
  },
  async created () {
    let res = await getArticleCategory()
    this.categoryList = res.data.data
  },
  mounted () {
    if (this.$route.params.id) {
      this.article = this.$route.params
    }
    this.editor = new E('#content')
    // 或者 const editor = new E( document.getElementById('div1') )
    this.editor.create()
    this.editor.txt.html(this.article.content)
  },
  methods: {
    doChange () {
      let file = this.$refs.file.files[0]
      this.article.cover = URL.createObjectURL(file)
    },
    async doRelease (state) {
      let fd = new FormData(this.$refs.form)
      fd.append('date', this.article.date)
      fd.append('state', state)
      fd.append('content', this.editor.txt.html())
      if (this.$route.params.id) {
        fd.append('id',this.article.id)
        let res = await editArticle(fd)
      }else {
          let res = await addArticle(fd)
      }
      // console.log(res);
      this.$message.success(state + '成功')
      this.$router.push('/articleList')
    }
  }
}
</script>

<style></style>
